از زمانی که تکنیک Style Tile توسط Samantha Warren به دنیا معرفی شد طراحان وب سایت با دیگر اعضای گروه طراحی مانند گرافیست ها و طراحی کاتالوگ و ... توانستند ارتباط بهتری را برقرار نمایند.

Style Tiles به مجموعه ای از الگوهای آماده گفته میشود که شما میتوانید به سرعت بسیاری از المانهای داخل صفحه مانند فونت ها, رنگ ها را دیده و آنها را آزمایش نمایید قبل از اینکه شما بخواهید طرح اصلی را طراحی یا اصطلاحا Mockup نمایید. این مراحل در نهایت میتواند برای نمایش دادن به مشتری و یا هر فرد دیگری که لازم است از مراحل طراحی اطلاع و آگاهی داشته باشد.

بنابراین شما نگرانی هایی که در گذشته بابت انتخاب فونت ها یا اینکه آیا رنگ قرمز به سایت من می آید یا خیر را نداشته باشید.

در نهایت استفاده نمودن از آن برای شما بسیار ساده میباشد. شما میتوانید آن را به مرحله ای از طراحی پروژه خود اضافه نمایید. ما از تجربه استفاده نمودن آن در گروه طراحی وب سایت اطلس وب در قالب این مقاله با شما صحبت خواهیم نمود و آن را به طور کامل به شما معرفی خواهیم نمود. عموما طراحی ها و آزمایش آن از یک صفحه سفید مرورگر آغاز میشود که میتواند بسیار دلهره آور باشد یا برخی از طراحان از یک صفحه سفید نرم افزار Photoshop کار خود را آغاز مینمایند که میتواند باعث سردرگمی نیز گردد. تمامی این کارها برای شروع طراحی میتواند کار سختی به حساب بیاید.

میتوانیم با ایجاد نمودن یک Style کار خود را آغاز نماییم. ایجاد طرح شبکه شبکه شده یا همان Tiles میتواند روند طراحی وب سایت را ساده تر نماید. توسط آن میتوانیم موقعیت آیتم ها را نسبت به دیگر آبجکت های داخل صفحه تعیین نماییم و این میتواند سرعت طراحی را بسیار زیاد افزایش دهد.

وب سایت هایی که این طرح ها را از پیش برای شما آماده نموده اند

در زیر نام چند وب سایت که میتوانید در آنها حالتهای طراحی شبکه شبکه یا همان Style Tiles را پیدا نمایید را آورده ایم.

The Style Prototype

http://seesparkbox.com/foundry/our_new_responsive_design_deliverable_the_style_prototype

Webstiles

http://namanyayg.com/

http://webstiles.namanyayg.com/

Compass Style Tiles

https://github.com/alienresident/style-tiles

Responsive Boilerplate for Style Tiles

https://github.com/Pardot/Responsive-Boilerplate-for-Style-Tiles

خودتان طرح را بسازید و در پروژه خود به کار ببرید

با اینکه ما وب سایت هایی که در آنها طرح های از پیش طراحی شده را میتوانستید در آنها پیدا نمایید را معرفی نمودیم ولی چرا بسیاری از طراحان دوست دارند تا خودشان کدهای html و css را در وب سایت و پروژه خود بنویسند؟

آیا زمان برای آنها مهم میباشد؟ هم بله و هم نه

اگر شما یک وب سایت ساده را میخواهید و برای تمامی صفحات و محتویات آن برنامه ریزی را ندارید و یا اینکه کاربران در این وب سایت اطلاعاتی را اضافه نمی نمایند میتوانید از همین وب سایت هایی که در بالا به آنها اشاره شد استفاده نمایید. اما اگر میخواهید یک وب سایت پیچیده را طراحی نمایید که دارای ورژن های موبایل و تبلت باشد و همچنین طراحی منحصر به فردی داشته باشد در این صورت شما خودتان باید یک سیستم Style Tile  منحصر به فرد خود را داشته باشید.

در این حالت ممکن است طرح های از پیش تعریف شده نتواند هدفهای شما را پوشش دهد در صورتیکه شما میخواهید مکان ویدئو ها و تب ها و همچنین جایگاه تمامی آبجکت ها داخل صفحه را مشخص و معین نمایید.

از سوی دیگر اگر شما بخواهید سایتی را طراحی نمایید که کمی از عرف طراحی وب سایت های دیگر فاصله دارد شما حتما باید کدهای html و css خود را در داخل پروژه داشته باشید.

چندان کار سختی نمیباشد. کافی است که یک طرح دو یا سه ستونی ایجاد نموده و سپس اقدام به جایگذاری آیتم ها در داخل آن نمایید.

تمامی این ها میتواند شامل موارد زیر باشد که عبارتند از:

·       رنگها و الگوها و موارد گرافیکی

·       موارد مربوط به زیبایی و خوانا نمودن صفحه وب سایت مانند: Heading, paragraph, list element, blockquote

·       طراحی و فرمت نمودن بخش تصاویر اگر وب سایت شما دارای گالری تصویر باشد

امروزه دیگر لزومی ندارد تا کدهایی را بنویسید که در تمامی مرورگرها قابل اجرا و پشتیبانی باشد. تنها کافی است که از زبان HTML5 استفاده نمایید. 

طراحی سایت